<template>
  <div class="flter-list">
    <ToRadio :title="item.title" :data="item.data" v-for="item in searchData" :key="item.id" />
  </div>
</template>

<script>
import { ref } from 'vue'

import { useSearchStore } from '@/stores/search'

import ToRadio from '@comps/ToSearch/ToRadio.vue'

function getFlterListData() {
  const SearchStore = useSearchStore()
  const searchData = ref([])

  function callback() {
    let timer = setTimeout(() => {
      if (SearchStore.tag.length <= 0) {
        callback()
        clearTimeout(timer)
      }
      searchData.value = [
        {
          id: 0,
          title: '地区',
          data: [
            {
              id: 1,
              tagName: '全部'
            },
            {
              id: 2,
              tagName: '中国'
            },
            {
              id: 3,
              tagName: '日本'
            }
          ]
        },
        {
          id: 1,
          title: '类型',
          data: [
            {
              id: 1,
              tagName: '全部'
            },
            {
              id: 2,
              tagName: 'TV'
            },
            {
              id: 3,
              tagName: '剧场版'
            },
            {
              id: 4,
              tagName: 'OVA'
            }
          ]
        },
        {
          id: 2,
          title: '排序',
          data: [
            {
              id: 1,
              tagName: '上传时间'
            },
            {
              id: 2,
              tagName: '总排行'
            }
          ]
        },
        {
          id: 3,
          title: '标签',
          data: SearchStore.tag
        },
        {
          id: 4,
          title: '年份',
          data: (function getYear() {
            const nowYear = new Date().getFullYear()
            let years = []
            function addObj(i, value) {
              const obj = {
                id: i + 1,
                tagName: value
              }
              return obj
            }
            for (let i = 0; i < 20; i++) {
              years.push(addObj(i, nowYear - i))
            }
            return years
          })()
        }
      ]
    }, 100)
  }

  callback()

  return {
    searchData
  }
}

export default {
  name: 'FlterList',
  props: {},
  components: {
    ToRadio
  },
  setup() {
    const SearchStore = useSearchStore()
    SearchStore.getTag()
    // watch(SearchStore.tag, { immediate: true })

    return {
      ...getFlterListData()
    }
  }
}
</script>

<style lang="scss" scoped>
.flter-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 24px 0 0 24px;
  background-color: $box_bg;
  div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
}
</style>
'
